<template>
	<div class="hot-recommend-box" :class="hotRecommedClass">
		<div ref='top'>
			<header ref='header'>
				<div v-if='isTopHeader'>
					<ZxyhHeader v-if="$channel=='zxyh'&& getPlatform=='app'" :title="'精彩回放'" :isClose='false' :isSearch='true' @search='searchTrue'></ZxyhHeader>
					<div v-else>
						<p class="header-text">精彩视频</p>
						<div class="search-btn-box">
							<Iconfont iconClass="sousuo begin-search-ru" @click.native="searchTrue" />
						</div>
					</div>
				</div>								
				<div  v-if="isSearch" class="search-wrap"  >
		            <form  @submit.prevent action="#">
		              <input type="search" placeholder="请输入搜索关键字" v-model="searchKeyword"  @keyup.13="handelSearch" ref="inputSearch">
		            </form>
		            <Iconfont iconClass="sousuo "/>
		            <div class="cancel"  @click="cancel">取消</div>
		        </div>
			</header>
			<div class="nav-tab">
				<ul class="newest-hot-ul">
					<li v-for="(v,index) in tabsParam"  :key='index' class="default-calss" :class="hotCurNum==index?'curClass':''" @click="clickSelectOption(v,index)">{{v.value}}</li>
				</ul>
				<ul class="parentClassUl" v-if="isNavTable">
					<li class="parentClassLi " :class="parentCurNum==vIndex?'curParentClass':''" v-for="(v,vIndex) in dataMenuArray" :key="v.id" @click.stop.prevent="clickParentMenu(v,vIndex)">
						{{v.title}}
						<div class="nav-er-table" v-if="isParentCurClass==v.id">
							<ul class="childenClassUl">
								<li class="childenClassLi"  :class="childCurNum==wIndex?'curChildClass':''" v-for="(w,wIndex) in v.children" :key='wIndex'  @click.stop.prevent="clickChildMenu(w.id,wIndex)">{{w.title}}</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="mask" v-show="maskShow" @touchmove.prevent></div>
		<div  :class="[connectBox]"  ref="connect">
			<ul class="list-ul" :class="listUl" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
				<li class="list-li"  v-for="(v,i) in greatVideoArray" :key="i" @click="linklookBackVideo(v)">
			    	<img class="list-img" :src="v.imagUrl+'?x-oss-process=image/resize,m_fixed,h_179,w_315'" v-on:click.self.prevent/>
			    	 <p class="list-p">{{v.title}}</p>
			   </li>
			</ul>
		</div>
	</div>
</template>

<script>
    import fun from '../../util/function'
	import ZxyhHeader from '@/components/zxyh/zxyhHeader'
	export default {
		components:{
		  ZxyhHeader
		},
		data() {
			return {
				dataMenuArray:[],//菜单数据
                isTop: false,
				isSearch:false,//搜索框
				isTopHeader:true,
				maskShow:false,//黑色覆盖层
				searchKeyword:'',
				isParentCurClass: '', //父选中状态
				curChildClass:'',//自己选中样式
				greatVideoArray:[],//视频数组
				
				parId:'',//要传的父id
				cateType:'',//要传的子集标签id
				selText:'',//要传的最新最热
				
				selectLeft: '按最新',
				tabsParam: [{
						value: '按最新',
						type: ''
					},
					{
						value: '按最热',
						type: 'pv'
					}
				],
				page: 0, //页码
				busy: false, //打开滚动
			    tipText: "",//底部文本提示
			    connectBox:'',//视频区域样式  gread-video-box
			    listUl:'',
			    scroll:'',//页面滚动高度
			    isNavTable:false,
			    
			    hotCurNum:0,//最新 最热高亮
			    parentCurNum:0,//一级菜单高亮
			    childCurNum:0,//二级菜单高亮
				getPlatform:fun.getPlatform(), //app wx
			}
		},
		created() {
			this.$store.dispatch("hideNav");
			this.getMenuData();
			fun.dotNum('liveMore_page');
			if(isIos && this.getPlatform=='app' &&this.$channel == 'zxyh'){		
				this.hotRecommedClass = 'recommend-box-zxyh-ios'
 			}
		},
		mounted() {
          this.$store.dispatch("hideNav");
          let _this = this;
          	_this.$refs.connect.addEventListener('scroll',_this.handleScroll);
          },
		activated() {
			  this.$store.dispatch("hideNav");
			  let _this = this;
			    if(_this.scroll > 0){
			       _this.$refs.connect.scrollTo(0, _this.scroll);
			       _this.scroll = 0;
	          	  _this.$refs.connect.addEventListener('scroll',_this.handleScroll);
			    }
			},
		deactivated(){
			let _this = this;
		     _this.$refs.connect.removeEventListener('scroll',_this.handleScroll);
		},
		methods: {
			handleScroll () {
			  let scrollTop = this.$refs.connect.scrollTop;
			  this.scroll = scrollTop;
			},
			loadMore: function() {
				let _this = this
				_this.busy = true;
				// 多次加载数据
				_this.tipText = "数据加载中..."
				setTimeout(() => {
					_this.page++;
					_this.getArrayData(_this.selText,_this.parId,_this.cateType);
				}, 200);

			},
			getArrayData(sel,pType,type) { //sel 空为最新 pv是热门  pType 父级菜单  type子集菜单
				let _this = this;
				_this.busy = true
				_this.$http.get("h5live/getHomeVideo",{
					params: {
						p: _this.page,
						sel:sel,
						pType:pType,//父级菜单
						type:type,//子集菜单
					}
				}).then( //sel 空为最新 pv是热门
					res => {
						if(res.data.code == '000000') {
							if(res.data.data.length) {								
								_this.greatVideoArray =[..._this.greatVideoArray,...res.data.data]
								_this.busy = false;
								if(res.data.data.length < 10) {
									_this.busy = true; //禁用
									if(_this.page>1){
										fun.toastMessage('没有更多数据了',1500)
									}
									
								}
							} else {
								_this.busy = true; //禁用								
								if(_this.page>1){
										fun.toastMessage('没有更多数据了',1500)
									}
								_this.page = 0
							}

						} else {
							console.log("接口报错")
						}

					}
				);
			},
			clickParentMenu(v, index) { 
			       if(v.id==''){//点击全部
						this.connectBox = 'gread-video-box-big';
						this.listUl = 'list-ul'
					}else{//点击其他
						this.dataMenuArray.map((item)=>{
							if(item.id==v.id){
								if(item.children.length){//有子集
									this.connectBox = 'gread-video-box'
									this.listUl = 'list-ul-menu'
								}else{							
									this.connectBox = 'gread-video-box-big'
									this.listUl = 'list-ul'
								}
							}
						})
					}
					this.childCurNum = 0
				this.parentCurNum = index;
				this.greatVideoArray = [];
				this.page = 1;
				this.isParentCurClass = v.id;
				this.parId = v.id;
				this.cateType = '';
				this.curChildClass = null
				this.getArrayData(this.selText,v.id,'');
			},
			clickChildMenu(id,index){//点击子菜单
				this.childCurNum = index
			   this.page = 1;
			   this.connectBox = 'gread-video-box'
			   this.greatVideoArray = [];
               this.cateType = id
               this.curChildClass = id;
               if(!id){
               	this.cateType = ''
               }
               this.getArrayData(this.selText,this.parId,this.cateType);
			},
			getMenuData() { //头部列表数据
				this.$http.get("/h5live/getHomeVideoType")
					.then(res => {
						if(res.data.code == "000000") {
							if(res.data.data.length) { 
								this.connectBox = 'gread-video-box-big'
								this.isNavTable = true;
								let allBtn = [{
									id: "",
									title: "全部",
									creator: "",									
									children: [],																		
									parentId: 0,
									channel: "",									
								}]
								this.dataMenuArray = [...allBtn,...res.data.data];
							} else {
								this.isNavTable = false;
								this.connectBox = 'gread-video-box-noMenu'
								this.listUl = 'list-ul-no-menu'
							}
						}
					})
					.catch(response => {
						console.log(response);
					});
			},

			clickMoreGreatPage(){
				this.$router.push({
					path: `/${this.$channel}/geratMoreVideo`,
					query: {
						sel:this.selText,
						cateType:this.cateType
						
					}
				});
			},
			searchTrue() {
              this.isTopHeader = false
              this.isSearch = true;
              this.maskShow = true;
              this.searchKeyword='' ;
              let _this = this
              setTimeout(()=>{//不加延迟 控制台报错 报错'focus' of undefined
	     	    _this.$refs.inputSearch.focus();
	     	 },1000)
			},
			cancel(){
			  this.isTopHeader = true
              this.isSearch = false
               this.maskShow = false
               this.searchKeyword=''
			},
			  handelSearch(){
			      this.maskShow=false;
			       this.isSearch = false;
			       this.isTopHeader =true
			      this.$refs.inputSearch.blur();
			      this.$router.push({
			        path: `/${this.$channel}/liveMoreSearch`,
			        query: {
			          content: this.searchKeyword,
			          sel:this.selText,
			          parId:this.$route.query.parId,
			          type: '',
			        }
			      })	
			 },
			 back(){
			 	this.$router.push(`/${this.$channel}/home`);
			 },
			 clickSelectRight(){
			 	this.isSelectRight = !this.isSelectRight;
			 },
			 clickSelectOption(v,index){
			 	this.page = 1;
			 	this.hotCurNum = index
			 	this.greatVideoArray = [];
				this.getArrayData(v.type,this.parId,this.cateType)
			 },
			 linklookBackVideo(v){
			 	this.$router.push(`/${this.$channel}/lookBack_particulars/${v.id}`);
			 }
		},
	}
</script>

<style scoped="scoped">	
	.hot-recommend-box{
		width: 100vw;
		height: 100vh;
	/*	background: pink;*/
		overflow: hidden;
	}
	.newest-hot-ul{
		display: flex;
		margin-left: 30px;
		height: 80px;
		justify-content: flex-start;
		align-items: center;
/*		background: darkcyan;*/
	}
	.newest-hot-ul li{
		font-size:26px;
		font-weight:400;
		color:rgba(51,51,51,1);
		margin-right: 15px;
	}
	.curClass{
		min-width: 130px;
		height:50px;
		background:rgba(245,245,245,1);
		border-radius:20px;
		color:#E12D36 !important ;
		line-height: 50px;
		text-align: center;
		padding: 0 14px;
	}
	.default-calss{
		min-width: 130px;
		height:50px;
		line-height: 50px;
		text-align: center;
		padding: 0 14px;
	}
	.curParentClass{
				background:rgba(245,245,245,1);
				border-radius:20px;
				color: #E12D36 !important;
	}
	header {
		position: relative;
		background: white;
		top: 0;
		left: 0;
		/*background: pink;*/
	}
	
	header .header-text {
		width: 100%;
		height: 80px;
		font-size: 36px;
		text-align: center;
		line-height: 80px;
		color: #333333;
		/*background: sandybrown;*/
	}
	.search-btn-box {
		height: 80px;
		position: absolute;
		top: 0;
		right: 30px;
		display: flex;
		align-items: center;
	}
	
	.begin-search-ru {
		font-size: 40px;
	}
	.mask{
	  width: 100vw;
	  height: calc(100vh - 80px);
	  position: fixed;
	  top:80px;
	  background:rgba(0,0,0,1);
	  opacity:0.4;
	  z-index: 10;
	}
	
	.search-wrap{
		height: 80px;
  display: flex;
  padding-left: 20px;
  align-items:center;
  opacity: 1;
 /* margin-top: 15px;*/
}

.search-wrap.searchShow{
  opacity: 1;
}
.search-wrap i{
  position: absolute;
  left:50px;
  font-size: 30px;
  color: #666;
  top:26px;
}
.search-wrap input{
  width: 620px;
  height: 60px;
  background:rgba(246,246,246,1);
  border-radius:30px;
  background: #F6F6F6;
  box-sizing: border-box;
  padding-left:  80px;
  font-size: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
}
 input::placeholder {
    padding: 10px 0 15px 0 ;
    }
.search-wrap .cancel{
  margin-left: 30px;
  font-size: 28px;
  color: #333;
}
	.curChildClass{
		color: white !important;
		background:#E12D36 !important;
		border: 1px solid #E12D36 !important;
	}
	.curParentClassAll {
		/*全部*/
		color: #F35757 !important;
	}
	
	.curLeftSelect {
		color: #E12D36 !important;
	}
	
	.h-great-tab ul {
		width: 750px;
		/*height: 60px;*/
		white-space: nowrap;
		overflow-x: scroll;
		margin-top: 15px;
		padding-right: 120px;
		/*margin-left: 45px;*/
		/* padding:  30px 120px 20px  30px;*/
	}
	
	.h-great-tab ul li {
		display: inline-block;
		margin-right: 45px;
		/*border-bottom: 4px solid #FF3B30;*/
		line-height: 45px;
		font-size: 28px;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: relative;
	}
	
	.h-great-tab ul li:first-child {
		margin-left: 45px;
	}
	
	/*.select-right-down {
		width: 115px;
		height: 120px;
		position: absolute;
		top: 170px;
		right: 30px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.18);
		border-radius: 8px;
	}
	
	.select-right-down ul li {
		width: 85px;
		height: 62px;
		font-size: 22px;
		font-weight: 300;
		color: #666666;
		text-align: center;
		line-height: 60px;
		margin: 0 auto;
	}
	
	.select-right-down ul li:first-child {
		border-bottom: 2px solid #F3F3F3;
	}*/
	
	.iconyoujiantou1 {
		transform: rotate(90deg);
		color: #8D11BD;
	}
	
	.first-menu-box {
		position: relative;
	}
	

	
	.great-video-box {
		width: 100vw;
		height: auto;
		background: white;
		/*margin-top: 10px;*/
	}
	
	.h-card {
		background: #fff;
		box-shadow: 0px 2px 5px 0px rgba(155, 155, 155, 0.05);
		padding-top: 20px;
	}
	
	.h-t-title.h-t-more {
		width: 670px;
	}
	
	.h-t-title {
		align-items: center;
		width: 670px;
		margin-left: 50px;
		position: relative;
	}
	
	.h-t-info {
		font-size: 36px;
		color: #181818;
		font-weight: bold;
		padding-left: 26px;
		display: flex;
		flex: 1;
		justify-content: space-between;
		position: relative;
		height: 44px;
		vertical-align: middle;
		line-height: 50px;
	}
	
	.h-t-info::after {
		content: "";
		display: block;
		position: absolute;
		transform-origin: 0 0;
		width: 5px;
		top: 0;
		left: 0;
		height: 44px;
		transform-origin: left 0;
		background: red;
		background: linear-gradient(0deg, rgba(204, 74, 77, 1), rgba(247, 127, 108, 1));
		border-radius: 3px;
	}
	
	.h-t-info>div {
		font-weight: bold;
		vertical-align: middle;
		line-height: 50px;
	}
	
	.h-great-tab {
		width: 100vw;
		height: 80px;
		background: pink;
		padding: 0 30px 0 0;
		display: flex;
		margin-top: 20px;
	}
	
	.select-right {
		width: 165px;
		height: 80px;
		background: white;
		background-size: 145px 80px;
		padding: 0 30px 0 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: absolute;
		top: 80px;
		right: 0px;
	}
	.select-right p {
		font-size: 22px;
		color: #8D11BD;
		margin-right: 10px;
		line-height: 40px;
		background: url(../../assets/images/homePv.png) no-repeat;
		background-size: 165px 40px;
		padding:  0 0 0 20px;
	}
	
	.curParentClass p {
		border-bottom: 4px solid #8D11BD;
	}
	
	.curParentClassAll p {
		border-bottom: 4px solid #8D11BD;
	}
	
	.nav-table {
		/*position: relative;*/
		/*margin-top: 20px;*/
		/*background: pink;*/
		/*background: seashell;*/
		width: 100%;
		height: 80px;
		background: white;
	}
	
	.parentClassUl {
		width: 750px;
		white-space: nowrap;
		overflow-x: scroll;
		/* -webkit-overflow-scrolling: touch;*/
	/*	background: #05D3F5;*/
		height: 50px;
		overflow-y: hidden;
		line-height: 50px;
		margin: 10px  0  10px 30px;
		padding-right: 30px;
	}
	
	.parentClassLi {
		height: 50px;
		display: inline-block;
		margin-right: 15px;
		font-size:26px;
		font-weight:400;
		color:rgba(51,51,51,1);
         min-width: 130px;
        text-align: center;
        padding: 0 14px;
	}
	
	.parentClassLi p {
		padding: 15px 10px;
		/*background: darkgoldenrod;*/
	}
	
	.nav-er-table {
		position: absolute;
		top: 240px;
		left: 0px;
		text-align: left;
	/*	background: silver;*/
	}
	
	.childenClassUl {
	    width: 720px;
		white-space: nowrap;
		overflow-x: scroll;
		font-size: 24px;
		margin-left: 30px;
	}
	
	.childenClassLi {
		display: inline-block;
		background: white;
		margin-right: 20px;
		border-radius: 20px;
		border: 1px solid #B3B3B3;
		padding: 0 14px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		padding: 0 22px;
		color: #999999;
		min-width: 130px;
	}
	.list-ul {
	  width: 100%;
	  height: 100%;
	  padding: 10px 30px 20px;
	  /* height: calc(100vh - 230px); */
	  overflow-y: scroll;
	  display: flex;
	  display: -webkit-flex;
	  flex-wrap: wrap;
	  -webkit-flex-wrap: wrap;
	  align-content: flex-start;
	}
	
	
	.list-li:nth-child(even) {
	  margin-left: 30px;
	}
	.gread-video-box{
		width: 100vw;
		height: calc(100vh - 280px);
		background: white;
		margin-top: 80px;
		overflow: scroll;
	}
	.list-ul-menu{
		 padding-bottom: 20px;
	}
	.gread-video-box-big{
		width: 100vw;
		height: calc(100vh - 230px);
		background: white;
		overflow-y: scroll;
		/*background: silver;*/
	}
	.gread-video-box-noMenu{
		width: 100vw;
		height: calc(100vh - 160px);
		background: white;
		overflow: scroll;
		background: white;
		/*background: darkgoldenrod;*/
	}
	.list-ul-no-menu{
		 height: calc(100vh - 160px);
	}
.list-li {
  width:330px;
  float: left;
  margin-top: 22px;
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
  background: rgba(255, 255, 255, 1);
}



.list-img {
  width: 100%;
  height: 187px;
  border-radius: 24px;
}
.list-p {
  width: 100%;
  margin-top: 10px;
  text-align: left;
  line-height: 40px;
 vertical-align: middle;
  font-size: 26px;
 text-align: justify;
  color: #333333;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
 
}

.h-great-list-info {
  padding: 0 10px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-flex-align-items: center;
}

.h-great-list-info i {
  font-size: 42px;
}

.h-great-list-info span {
  color: #000;
  font-size: 26px;
   height: 42px;
  line-height: 38px;
}
.more-video-box{
	width:150px;
	height:45px;
	background:rgba(242,242,242,1);
	border-radius:23px;
	margin: 0 auto;
	text-align: center;
	line-height: 45px;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #666666;
	margin-bottom: 50px;
}
.iconyoujiantou {
		transform: rotate(0deg);
		margin-left: 10px;
	}

	.tip-text {
		width: 100%;
		height: 80px;
		line-height: 80px;
		color: #999999;
		text-align: center;
		font-size: 26px;
		margin-top: 50px;
	}
	::-webkit-scrollbar {
	  height: 0;
	  width: 0;
	  color: transparent;
	   display: none;
	}
	.recommend-box-zxyh-ios .gread-video-box-big{
     height: calc(100vh - 290px);
	}
	.recommend-box-zxyh-ios .gread-video-box{
		height: calc(100vh - 360px);
	}
	.recommend-box-zxyh-ios .list-ul-no-menu,.recommend-box-zxyh-ios .gread-video-box-noMenu{
		 height: calc(100vh - 220px);
	}
	.recommend-box-zxyh-ios .nav-er-table{
		top: 300px;
	}
	.recommend-box-zxyh-ios .search-wrap{
		margin-top: 60px;
	}
	.recommend-box-zxyh-ios .mask{
        height: calc(100vh - 140px);
	    top:140px;
	}
</style>